<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!--  在vue的配置中，如果没有template，则把容器当做template直接使用  -->
    <div id="app">
        <h3>{{count+1}}</h3>
        <p>{{msg}}</p>
    </div>
    <script>
        // Vue的基本使用
        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    msg:'hello world',
                    count:0
                }
            }

        })

    // 1.. data 为什么写成函数（data写成对象的缺点如下：）
    // 1. 声明data（模拟这个是某个组件的data）
        const data1 = {
            name:'lisi',
            age: 18
        };

    // 当组件复用的时候，很多地方都要对data操作

        // 两者的地址是一样的，只要修改一个其他的都会修改，影响组件的复用性。
        // data组件写成对象会导致组件间的相互影响
        const data1_one = data1;
        const data1_two = data1;

        data1_one.age = 20
        data1_two.age = 30

        console.log(data1_one)
        console.log(data1_two)

    // 2.. data 为什么写成函数（data写成函数如下：）
        function data2(){
            const o ={
                name:'zhangsan',
                age:25
            }
            return o;
        }

        const data2_one = data2()
        const data2_two = data2()

        // 当组件被复用的时候，需要拿到data2中的数据，则需要调用data2函数
        // 每次data2函数的调用，都会创建一个新的对象，所以组件之间的data是不会互相影响的
        data2_one.age = 40
        data2_two.age = 50

        console.log(data2_one)
        console.log(data2_two)
    </script>
</body>
</html>